<template>
  <el-dialog v-model="visible" title="批量查询" width="720" :close-on-click-modal="false">
    <div class="p-2 rounded bg-blue-400/10">方法一：粘贴文本查询</div>
    <div class="mb-4">
      <div class="my-2">
        <el-radio-group v-model="formState.type">
          <el-radio :value="1">企业名称</el-radio>
          <el-radio :value="2">信用代码</el-radio>
        </el-radio-group>
      </div>
      <div class="relative">
        <el-input
          v-model="formState.content"
          style="width: 100%"
          :rows="20"
          type="textarea"
          placeholder="提示：多条数据请换行，一行默认为一同一条数据"
          input-style="padding-bottom:60px"
        />
        <div class="absolute left-0 right-0 bottom-0 rounded p-3 flex gap-4 items-center">
          <span>单次查询条数不能超过5000</span>
          <el-button type="primary" size="small" @click="handleView()">立即查看</el-button>
        </div>
      </div>
    </div>
    <div class="p-2 rounded bg-blue-400/10">方法二：上传文本查询</div>
    <div class="flex gap-4 my-2 items-first-baseline">
      <div class="flex items-first-baseline">
        <span>1、</span>
        <el-button text type="primary" :icon="Download" @click="handleDownloadTemplate()"
          >下载模板</el-button
        >
      </div>
      <div class="flex items-first-baseline">
        <span>2、</span>
        <span>在模版中填写对应内容</span>
      </div>
      <div class="flex items-first-baseline">
        <span>3、</span>
        <div>
          <el-button text type="primary" :icon="Upload" @click="handleUploadFile()"
            >上传文件</el-button
          >
          <div class="text-xs text-white/30 mt-1">支持格式：xls、xlsx</div>
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script setup lang="ts">
import { reactive, watchEffect } from 'vue'
import { Upload, Download } from '@element-plus/icons-vue'

defineOptions({
  name: 'BatchQueryModal'
})

const visible = defineModel({ type: Boolean, required: true, default: false })

const initialFormState = () => ({
  type: 1,
  content: ''
})
const formState = reactive(initialFormState())

const handleView = () => {}

const handleDownloadTemplate = () => {}

const handleUploadFile = () => {}

watchEffect(() => {
  if (!visible.value) {
    Object.assign(formState, initialFormState())
  }
})
</script>

<style scoped>
.items-first-baseline {
  align-items: first baseline;
}
</style>
